<template>
  <div>
    <Meta pagealias="camnoticelist" />
    <Head>资讯列表</Head>
    <div class="box_1">
      <div class="content" @click="toggleSearch">
        <div class="search_ico">
          {{ params.keyword === "" ? "请输入关键字" : params.keyword }}
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="top" :style="{ height: '90%' }">
      <TopSearch type="campus" @hideSearch="toggleSearch" @doSearch="doSearchByKeyword"></TopSearch>
    </van-popup>
    <van-empty image="search" description="没有找到对应的数据"  style="background-color:#fff" v-if="show_empty === true" />
    <van-list v-if="noticeData.length > 0"  v-model="loading" :finished="finished"  :finished-text="finishedText"  @load="onLoad">
      <div class="notice_list_box">
        <div :class="noticeData.length > 1? 'notice_list' : 'notice_list notice_list_pd' ">

          <div class="notice_item" v-for="(item,index) in noticeData" :key="index" @click="$router.push('/campus/notice/' +  item.id)">
            <div class="notice_info">
              <a class="notice_text substring2">{{item.title}}</a>
              <p class="notice_time substring">网申起止时间：{{item.holddate_start | timeFilter}}  —  {{item.holddate_end | timeFilter}}</p>
            </div>
            <div class="release_time clearfix">
              <span class="left text_1 substring">发布：{{item.addtime | timeFilter}}</span>
              <span class="left text_2 substring">{{item.click}}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
    <div class="height" v-if="noticeData.length > 3"></div>
    <BottomNav></BottomNav>
  </div>
</template>
<script>
import BottomNav from '../components/BottomNav.vue'
import api from '@/api.js'
import http from '@/utils/http.js'
import {obj2Param, parseTime} from '@/utils/index.js'
export default{
  components: {
    BottomNav
  },
  data () {
    return {
      show: false,
      loading: false,
      finished: false,
      finishedText: '',
      params: {
        keyword: ''
      },
      page: 1,
      pagesize: 10,
      show_empty: false,
      noticeData: []
    }
  },
  mounted () {
    this.getNotice(true)
  },
  watch: {
    $route (to, from) {
      // 对路由变化作出响应...
      if (from.name !== 'campusNoticeShow' && to.name === 'campusNotice') {
        // 将地址栏中的url参数初始化到参数对象中
        this.initQuery(to.query)
        this.getNotice(true)
      }
    }
  },
  filters: {
    timeFilter (timestamp) {
      return parseTime(timestamp, '{y}-{m}-{d}')
    }
  },
  methods: {
    toggleSearch () {
      this.show = !this.show
    },
    getNotice (init) {
      this.show_empty = false
      let conditions = {...this.params}
      if (init === true) {
        this.page = 1
        this.finishedText = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      http.get(api.campus_notice, conditions).then((res) => {
        if (init === true) {
          this.noticeData = res.data.items
        } else {
          this.noticeData = this.noticeData.concat(res.data.items)
        }
        this.loading = false
        if (res.data.items.length < this.pagesize) {
          this.finished = true
          if (init === false) {
            this.finishedText = '没有更多了'
          } else if (res.data.items.length === 0) {
            this.show_empty = true
          }
        }
      })
    },
    onLoad () {
      this.page++
      this.getNotice(false)
    },
    doSearchByKeyword (data) {
      for (const key in this.params) {
        this.params[key] = ''
      }
      this.params.keyword = data.keyword
      this.page = 1
      this.$router.push('/campus/notice' + obj2Param(this.params, '?'))
    },
    initQuery (query) {
      for (const key in this.params) {
        if (query.hasOwnProperty(key)) {
          this.params[key] = query[key]
        } else {
          this.params[key] = ''
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.van-list{
  background:#f4f7fc ;
}
.box_1 {
  .content {
    .search_ico {
      font-size: 12px;
      color: #c9c9c9;
      padding: 10px 0 10px 23px;
      background: url("../../../assets/images/search_ico_gray.svg") 0 center no-repeat;
      background-size: 15px;
      position: absolute;
      top:0;
      left:50%;transform:translate(-50%,0);line-height: normal;
      &.has {
        color: #333;
      }
    }
    position: relative;
    width: 340px;
    height: 37px;
    margin: 0 auto;
    background-color: #f8f8f8;
    text-align: center;
    border-radius: 36px;
  }
  width: 100%;
  background-color: #ffffff;
  padding: 11px 0;
}

.height{
  height:53px;
}
.height2 {
  height: 25px;
}
.notice_list_box{
  min-height: 75px;
  background-color: #f4f7fc;
  .notice_list{
    margin: 0 10px;
    padding: 10px 0 0;
    .notice_item{
      height: 150px;
      margin-bottom: 10px;
      background: #fff;
      &:last-child{
        margin-bottom: 0;
      }
      .notice_info{
        font-size: 14px;
        border-bottom:1px solid #ebebeb;
        padding: 22px 15px 12px ;
        .notice_text{
          font-size: 15px;
          color: #25242c;
          margin-bottom: 12px;
          height: 40px;
        }
        .notice_time{
          color: #01cf85;
        }
      }
      .release_time{
        color:#555555 ;
        font-size: 12px;
        padding: 12px 15px;
        .text_1{
          display: block;
          min-width: 200px;
          padding-left: 17px;
          margin-right: 30px;
          background: url(../../../assets/images/campus/notice-icon-1.png) no-repeat left center /10px 10px;
        }
        .text_2{
          display: block;
          min-width: 75px;
          text-align: left;
          padding-left: 17px;
          background: url(../../../assets/images/campus/notice-icon-2.png) no-repeat left center /13px 10px;
        }
      }
    }
  }
  .notice_list_pd{
    padding: 10px 0;
  }
}
</style>
